import React, { memo, useState } from 'react'
import HomeWrapper from './style'
import Header from '../../components/header'
import Footer from '../../components/footer'

const Home = memo(() => {
  const [meal,setMeal] = useState('')
  function handleSetMeal(e: React.ChangeEvent<HTMLSelectElement>) {
    console.log(e);
    
    setMeal(e.target.value)
  }
  return (
    <HomeWrapper>
      <Header />
      {/* 内容 区域 */}
      <div className="main">
        <div className="flag-searchArea">
          <h2 className="flag">立即指定个人健康美食推荐</h2>
          <form action="" className="searchArea">
              <div className="selectMeal-container">
                <select name="selectMeal" id="" className="selectMeal" onChange={e => handleSetMeal(e)} onClick={()=> console.log('hahaha')}>
                  <option value="早饭">早饭</option>
                  <option value="午饭">午饭</option>
                  <option value="晚饭">晚饭</option>
                </select>
              </div>
              <div className="typeMeal-container">
                <select name="typeMeal" id="" className="typeMeal" onChange={e => handleSetMeal(e)} onClick={()=> console.log('hahaha')}>
                  <option value="中餐">中餐</option>
                  <option value="西餐">西餐</option>
                </select>
              </div>
              <div className="slimmingMeal">
                <input type="checkbox" className="slimmingBtn" name="" id="" /><span className="slimmingText">减肥餐</span>
              </div>
              <div className="remainFood-container">
                <input type="text" className="remainFood" placeholder="请输入现有的食材, 例如：西红柿、土豆、白菜、莴苣"/>
              </div>
              <button type="button" className="search">搜索</button>
          </form>
        </div>
      </div>
      <Footer />
    </HomeWrapper>
  )
})

export default Home